<div
  class="modal fade"
  data-backdrop="static"
  data-keyboard="false"
  v-kb-modal="isShow"
>
  <div v-if="data" class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" data-dismiss="modal"
          ><i class="fa fa-close"></i
        ></button>
        <h4 class="modal-title">{{data.name}}</h4>
      </div>
      <div class="modal-body template-info">
        <div class="row">
          <template v-if="!selected">
            <div
              id="image-views"
              class="carousel slide col-md-8"
              data-ride="carousel"
            >
              <template v-if="data.images.length">
                <ol class="carousel-indicators">
                  <li
                    v-for="(item,index) in data.images"
                    data-target="#image-views"
                    :data-slide-to="index"
                    :class="{active:index==0}"
                  ></li>
                </ol>

                <div class="carousel-inner" role="listbox">
                  <div
                    v-for="(item,index) in data.images"
                    :key="index"
                    class="item "
                    :class="{active:index==0}"
                    style="height: 420px;"
                  >
                    <img :src="item" />
                  </div>
                </div>

                <a
                  class="left carousel-control"
                  href="#image-views"
                  role="button"
                  data-slide="prev"
                >
                  <span
                    class="glyphicon glyphicon-chevron-left"
                    aria-hidden="true"
                  ></span>
                  <span class="sr-only">Previous</span>
                </a>
                <a
                  class="right carousel-control"
                  href="#image-views"
                  role="button"
                  data-slide="next"
                >
                  <span
                    class="glyphicon glyphicon-chevron-right"
                    aria-hidden="true"
                  ></span>
                  <span class="sr-only">Next</span>
                </a>
              </template>
            </div>
            <div class="col-md-4">
              <ul class="list-group">
                <li class="list-group-item">
                  <span class="title">{{Kooboo.text.common.author}}</span>
                  {{data.userName}}
                </li>
                <li v-if="data.link" class="list-group-item">
                  <span class="title">{{Kooboo.text.common.link}}</span>
                  <a
                    href="#"
                    class="text-break"
                    :href="data.link"
                    target="_blank"
                    >{{data.link}}</a
                  >
                </li>
                <li class="list-group-item">
                  <span class="title">{{Kooboo.text.common.description}}</span>
                  {{data.description ||Kooboo.text.site.template.noDescription}}
                </li>
                <li class="list-group-item">
                  <span class="title"
                    >{{Kooboo.text.component.templateModal.downloads}}</span
                  >
                  {{data.downloadCount}}
                </li>
                <li class="list-group-item">
                  <span class="title">{{Kooboo.text.common.size}}</span>
                  {{data.size}}
                </li>
                <li class="list-group-item">
                  <span class="title">{{Kooboo.text.common.lastModified}}</span>
                  {{data.lastModified}}
                </li>
                <li class="list-group-item">
                  <span class="title"
                    >{{Kooboo.text.component.templateModal.dynamicContent}}</span
                  >
                  <div class="margin-top-5">
                    <template v-if="data.allDynamicCount">
                      <label
                        v-if="data.layoutCount"
                        class="label label-sm kb-table-label-refer"
                        :style="{ background: Kooboo.getLabelColor('layout') }"
                        >{{data.layoutCount + ' ' +
                        Kooboo.text.component.table.layout}}</label
                      >
                      <label
                        v-if=" data.menuCount"
                        class="label label-sm kb-table-label-refer"
                        :style="{ background: Kooboo.getLabelColor('menu') }"
                        >{{data.menuCount + ' ' +
                        Kooboo.text.component.table.menu}}</label
                      >
                      <label
                        v-if="data.pageCount"
                        class="label label-sm kb-table-label-refer"
                        :style="{ background: Kooboo.getLabelColor('page') }"
                        >{{data.pageCount + ' ' +
                        Kooboo.text.component.table.page}}</label
                      >
                      <label
                        v-if="data.viewCount"
                        class="label label-sm kb-table-label-refer"
                        :style="{ background: Kooboo.getLabelColor('view') }"
                        >{{data.viewCount + ' ' +
                        Kooboo.text.component.table.view}}</label
                      >
                      <label
                        v-if="data.imageCount"
                        class="label label-sm kb-table-label-refer"
                        :style="{ background: Kooboo.getLabelColor('image') }"
                        >{{data.imageCount + ' ' +
                        Kooboo.text.component.table.image}}</label
                      >
                      <label
                        v-if=" data.contentCount"
                        class="label label-sm kb-table-label-refer"
                        :style="{ background: Kooboo.getLabelColor('textcontent') }"
                        >{{data.contentCount + ' ' +
                        Kooboo.text.component.table.textcontent}}</label
                      >
                    </template>
                    <template v-else>
                      {{Kooboo.text.site.template.noDynamic}}
                    </template>
                  </div>
                </li>
                <li class="list-group-item">
                  <span class="title">{{ Kooboo.text.common.tags }}</span>
                  <div class="margin-top-5">
                    <template v-if="data.tags">
                      <label
                        v-for="tag in data.tags.split(',')"
                        :key="tag"
                        class="label label-sm gray kb-table-label-refer"
                        >{{tag}}</label
                      >
                    </template>
                    <template v-else>
                      {{Kooboo.text.site.template.noTag}}
                    </template>
                  </div>
                </li>
              </ul>
            </div>
          </template>
          <template v-else>
            <div class="col-md-10 col-md-offset-1">
              <kb-form
                simple
                class="form-horizontal"
                :model="model"
                :rules="rules"
                ref="form"
              >
                <div class="note note-info">
                  <p>{{Kooboo.text.component.templateModal.hint}}</p>
                </div>
                <kb-form-item class="form-group" prop="siteName" v-slot="error">
                  <div
                    :class="{'has-error' : !!error.error}"
                    id="site-name-error-container2"
                  >
                    <label class="col-md-2 control-label" for="SiteName"
                      >{{Kooboo.text.component.templateModal.siteName}}</label
                    >
                    <div class="col-md-10">
                      <input
                        type="text"
                        class="form-control input-medium"
                        name="SiteName"
                        :placeholder="Kooboo.text.component.templateModal.siteName"
                        v-model="model.siteName"
                        ref="siteName"
                        v-kb-tooltip:right.manual.error="error.error"
                        data-container="#site-name-error-container2"
                      />
                      <span class="help-block">
                        {{Kooboo.text.component.templateModal.siteNameHint}}
                      </span>
                    </div>
                  </div>
                </kb-form-item>
                <kb-form-item class="form-group" prop="subDomain" v-slot="error">
                  <label for="SubDomain" class="col-md-2 control-label"
                    >{{Kooboo.text.component.table.domain}}</label
                  >
                  <div class="col-md-10">
                    <div class="form-inline" :class="{'has-error' : !!error.error}">
                      <input
                        type="text"
                        class="input-medium form-control"
                        :placeholder="Kooboo.text.component.templateModal.subDomain"
                        v-model="model.subDomain"
                        v-kb-tooltip:right.manual.error="error.error"
                        data-container="#site-name-error-container2"
                      />
                      <div class="form-group">
                        <select class="form-control" v-model="model.rootDomain">
                          <option
                            v-for="item in domains"
                            :key="item.value"
                            :value="item.value"
                            >{{item.displayText}}</option
                          >
                        </select>
                      </div>
                    </div>
                    <span class="help-block"
                      >{{Kooboo.text.component.templateModal.domainHint}}</span
                    >
                  </div>
                </kb-form-item>
              </kb-form>
            </div>
          </template>
        </div>
      </div>
      <div class="modal-footer">
        <template v-if="!selected">
          <button class="btn green" @click="selected=true"
            >{{Kooboo.text.component.templateModal.useThisTemplate}}</button
          >
          <a :href="data.previewUrl" class="btn btn-default" target="_blank"
            >{{ Kooboo.text.common.preview}}</a
          >
        </template>
        <template v-else>
          <button @click="onImport" class="btn green"
            >{{Kooboo.text.common.import}}</button
          >
          <button class="btn gray" @click="selected = false"
            >{{Kooboo.text.common.back}}</button
          >
        </template>
      </div>
    </div>
  </div>
</div>
